import Card from '@/components/Card';
import Empty from '@/components/Empty';
import { performanceControllerGetData as getData } from '@/services/ess/diagnosisPerformance';
import { Flex } from 'antd';
import ReactEcharts from 'echarts-for-react';
import React, { useEffect, useState } from 'react';
import { useIntl, useModel } from 'umi';
import Styles from './index.less';

const initData = {
  power: null,
  boxList: null,
  soh: null,
  working: null,
  maxWorking: null,
  maxSoh: null,
  maxPower: null,
};

const Index: React.FC = () => {
  const { stationId } = useModel('@@initialState')?.initialState || {};
  const [loading, setLoading] = useState(true);
  const [pageData, setPageData] = useState<API.PerformanceData>(initData);
  const intl = useIntl();
  const isEnglish = intl.locale === 'en-US';
  useEffect(() => {
    (async function () {
      try {
        const res = await getData({ stationId });
        if (res.success) {
          const data = res.data || {};

          const workingList = [...(data?.workingList ?? [])].map((i) =>
            typeof i === 'string' ? Number(i) : i,
          );
          const powerList = [...(data?.powerList ?? [])].map((i) =>
            typeof i === 'string' ? Number(i) : i,
          );
          const initialWorking = Number(data?.peak?.initialWorking ?? 0);
          const initialPower = Number(data?.peak?.initialPower ?? 0);

          setPageData({
            ...pageData,
            ...data,
            maxWorking: Math.max(...workingList, initialWorking),
            maxPower: Math.max(...powerList, initialPower),
            minWroking: Math.min(...workingList, initialWorking),
            minPower: Math.min(...powerList, initialPower),
          });
        } else {
          setPageData({ ...initData });
        }
        setLoading(false);
      } catch (error) {
        setLoading(false);
        setPageData({ ...initData });
      }
    })();
  }, []);

  const colors = ['#1A6CFE', '#78DD5C', '#ff7a0c'];

  const DEFAULT_GAUGE_MAX = 240;

  return (
    <div>
      <Card
        title={
          <span>
            {intl.formatMessage({
              id: 'diagnosticPrediction.performancePrediction.plantPerformancePrediction',
            })}
            {pageData.workState !== null && (
              <span className={Styles.status}>
                {intl.formatMessage({
                  id: 'diagnosticPrediction.performancePrediction.workStatus',
                })}
                ：{pageData.workState}
              </span>
            )}
          </span>
        }
        // TODO 翻译
        extra={
          <span>
            {intl.formatMessage({ id: 'diagnosticPrediction.performancePrediction.referenceOnly' })}
          </span>
        }
        loading={loading}
      >
        {pageData.working !== null ? (
          <>
            <h4 style={{ marginBottom: 25 }}>
              <span
                style={{ display: 'inline-block', fontSize: 16, fontWeight: 600, marginRight: 10 }}
              >
                {intl.formatMessage({
                  id: 'diagnosticPrediction.performancePrediction.performancePrediction',
                })}
              </span>
              <span>
                {intl.formatMessage(
                  { id: 'diagnosticPrediction.performancePrediction.predictedOperatingCondition' },
                  { 1: pageData.working, 2: pageData.reduceWorking },
                )}
              </span>
            </h4>
            <Flex justify="center">
              <div style={{ width: '45%' }}>
                <ReactEcharts
                  option={{
                    grid: {
                      left: '3%',
                      right: '1%',
                      top: 10,
                      bottom: -30,
                      containLabel: true,
                    },
                    series: [
                      {
                        type: 'gauge',
                        center: ['50%', '60%'],
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: pageData.initialWorking || DEFAULT_GAUGE_MAX,
                        splitNumber: 12,
                        itemStyle: {
                          color: '#1A6CFE',
                        },
                        progress: {
                          show: true,
                          width: 30,
                        },
                        pointer: {
                          show: false,
                        },
                        axisLine: {
                          lineStyle: {
                            width: 26,
                          },
                        },
                        axisTick: {
                          distance: -45,
                          splitNumber: 5,
                          lineStyle: {
                            width: 2,
                            color: '#222',
                          },
                        },
                        splitLine: {
                          distance: -52,
                          length: 14,
                          lineStyle: {
                            width: 3,
                            color: '#222',
                          },
                        },
                        axisLabel: {
                          distance: -20,
                          color: '#222',
                          fontSize: 14,
                          formatter: function (val) {
                            //解决刻度的值为浮点数问题
                            return Math.ceil(val);
                          },
                        },
                        anchor: {
                          show: false,
                        },
                        title: {
                          show: false,
                        },
                        detail: {
                          valueAnimation: true,
                          width: '60%',
                          lineHeight: 30,
                          borderRadius: 8,
                          offsetCenter: [0, '-15%'],
                          fontSize: 28,
                          fontWeight: 'normal',
                          formatter: '{value}分钟',
                          color: 'inherit',
                        },
                        data: [
                          {
                            value: pageData.working || 0,
                            name: intl.formatMessage({
                              id: 'diagnosticPrediction.performancePrediction.predictingWorkingConditionDuration',
                            }),
                          },
                        ],
                      },
                      {
                        type: 'gauge',
                        center: ['50%', '60%'],
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: pageData.initialWorking || DEFAULT_GAUGE_MAX,
                        itemStyle: {
                          color: '#73a5ff',
                        },
                        progress: {
                          show: true,
                          width: 8,
                        },
                        pointer: {
                          show: false,
                        },
                        axisLine: {
                          show: false,
                        },
                        axisTick: {
                          show: false,
                        },
                        splitLine: {
                          show: false,
                        },
                        axisLabel: {
                          show: false,
                        },
                        detail: {
                          show: false,
                        },
                        data: [
                          {
                            value: pageData.working || 0,
                            name: intl.formatMessage({
                              id: 'diagnosticPrediction.performancePrediction.predictingWorkingConditionDuration',
                            }),
                          },
                        ],
                      },
                    ],
                  }}
                />
              </div>
              <div style={{ width: '45%' }}>
                <ReactEcharts
                  option={{
                    grid: {
                      left: '3%',
                      right: '1%',
                      top: 10,
                      bottom: -30,
                      containLabel: true,
                    },
                    series: [
                      {
                        type: 'gauge',
                        center: ['50%', '60%'],
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: pageData.initialWorking || DEFAULT_GAUGE_MAX,
                        splitNumber: 12,
                        itemStyle: {
                          color: '#1A6CFE',
                        },
                        progress: {
                          show: true,
                          width: 30,
                        },
                        pointer: {
                          show: false,
                        },
                        axisLine: {
                          lineStyle: {
                            width: 26,
                          },
                        },
                        axisTick: {
                          distance: -45,
                          splitNumber: 5,
                          lineStyle: {
                            width: 2,
                            color: '#222',
                          },
                        },
                        splitLine: {
                          distance: -52,
                          length: 14,
                          lineStyle: {
                            width: 3,
                            color: '#222',
                          },
                        },
                        axisLabel: {
                          distance: -20,
                          color: '#222',
                          fontSize: 14,
                          formatter: function (val) {
                            //解决刻度的值为浮点数问题
                            return Math.ceil(val);
                          },
                        },
                        anchor: {
                          show: false,
                        },
                        title: {
                          show: false,
                        },
                        detail: {
                          valueAnimation: true,
                          width: '60%',
                          lineHeight: 30,
                          borderRadius: 8,
                          offsetCenter: [0, '-15%'],
                          fontSize: 28,
                          fontWeight: 'normal',
                          formatter: '{value}分钟',
                          color: 'inherit',
                        },
                        data: [
                          {
                            value: pageData.initialWorking || 0,
                            name: intl.formatMessage({
                              id: 'diagnosticPrediction.performancePrediction.totalDurationOfInitialOperatingConditions',
                            }),
                          },
                        ],
                      },
                      {
                        type: 'gauge',
                        center: ['50%', '60%'],
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: pageData.initialWorking || DEFAULT_GAUGE_MAX,
                        itemStyle: {
                          color: '#73a5ff',
                        },
                        progress: {
                          show: true,
                          width: 8,
                        },
                        pointer: {
                          show: false,
                        },
                        axisLine: {
                          show: false,
                        },
                        axisTick: {
                          show: false,
                        },
                        splitLine: {
                          show: false,
                        },
                        axisLabel: {
                          show: false,
                        },
                        detail: {
                          show: false,
                        },
                        data: [
                          {
                            value: pageData.initialWorking || 0,
                            name: intl.formatMessage({
                              id: 'diagnosticPrediction.performancePrediction.totalDurationOfInitialOperatingConditions',
                            }),
                          },
                        ],
                      },
                    ],
                  }}
                />
              </div>
            </Flex>
          </>
        ) : (
          <Empty />
        )}
      </Card>
      <Flex gap={20} style={{ marginTop: 20 }}>
        <Card
          title={intl.formatMessage({
            id: 'diagnosticPrediction.performancePrediction.sohPrediction',
          })}
          style={{ width: '40%', minWidth: 400 }}
          loading={loading}
        >
          {pageData.soh !== null ? (
            <>
              <Flex justify="center" style={{ marginTop: 40 }}>
                <ReactEcharts
                  style={{
                    width: 210,
                    height: 210,
                  }}
                  option={{
                    title: [
                      //标题组件，数组里的一个对象表示一个标题组件
                      {
                        text: intl.formatMessage({
                          id: 'diagnosticPrediction.performancePrediction.sohRecentlyMeasured',
                        }),
                        left: 'center',
                        bottom: '33%',
                        textStyle: { color: '#222', fontSize: 13 },
                      },
                    ],
                    series: [
                      {
                        type: 'gauge', // 仪表盘类型
                        name: '系列名称', // 用于tooltip的显示
                        startAngle: 90, // 仪表盘开始角度（设置背景圆的角度）
                        endAngle: -270, // 仪表盘结束角度
                        center: ['50%', '50%'], // 中心点（圆心坐标）
                        radius: '100%', // 圆大小（仪表盘半径）
                        clockwise: true, // 仪表盘刻度是否是顺时针增长
                        // 仪表盘轴线相关配置
                        axisLine: {
                          show: true,
                          roundCap: true, // 两端显示成圆形（背景环）
                          clip: false, // 是否裁剪超出部分
                          // 设置背景圆环样式
                          lineStyle: {
                            width: 30, // 圆环宽度
                            color: [[1, '#eff1f5']], // 圆环背景色
                          },
                        },
                        // 仪表盘指针
                        pointer: {
                          show: false,
                        },
                        // 进度设置
                        progress: {
                          show: true,
                          overlap: false, // 多组数据时进度条是否重叠
                          roundCap: true, // 是否在两端显示成圆形
                          clip: false, // 是否裁掉超出部分
                          // 进度条样式
                          itemStyle: {
                            borderWidth: 0,
                            shadowColor: '',
                            color: {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [
                                {
                                  offset: 0,
                                  color: '#56D433', // 0% 处的颜色  '#02C77E'
                                },
                                {
                                  offset: 1,
                                  color: '#56D433', // 100% 处的颜色  '#017770'
                                },
                              ],
                              global: false, // 缺省为 false
                            },
                          },
                        },
                        // 仪表盘分割线
                        splitLine: {
                          show: false,
                        },
                        // 刻度样式
                        axisTick: {
                          show: false,
                        },
                        // 刻度标签
                        axisLabel: {
                          show: false,
                        },
                        title: {
                          show: false,
                          fontSize: 28,
                        },
                        detail: {
                          fontWeight: 'normal',
                          fontSize: 32,
                          color: 'auto',
                        },
                        data: [
                          {
                            value: pageData.soh ?? 0,
                            name: intl.formatMessage({
                              id: 'diagnosticPrediction.performancePrediction.sohRecentlyMeasured',
                            }),
                            title: {},
                            detail: {
                              // 中心title设置
                              offsetCenter: ['0%', '0%'],
                              color: '#222',
                              formatter: function (value) {
                                return `${value}%`;
                              },
                            },
                          },
                        ],
                      },
                    ],
                  }}
                />
              </Flex>
              <div style={{ textAlign: 'center', marginTop: 20 }}>
                <div className={Styles.badge}>
                  {intl.formatMessage({
                    id: 'diagnosticPrediction.performancePrediction.sohRecentlyMeasured',
                  })}
                </div>
                {intl.formatMessage(
                  { id: 'diagnosticPrediction.performancePrediction.realTimeSoh' },
                  {
                    1: pageData.soh,
                    2: pageData.reduceSoh,
                  },
                )}
              </div>
            </>
          ) : (
            <Flex justify="center" style={{ height: 300 }}>
              <ReactEcharts
                style={{
                  width: 210,
                  height: 210,
                  marginTop: 50,
                }}
                option={{
                  title: [
                    {
                      text: '--%',
                      top: '37%', // 控制位置
                      left: '47%', // 控制位置
                      textAlign: 'center', // 让文字居中
                      textStyle: {
                        fontSize: 24,
                        //color: token.colorText,
                      },
                    },
                    {
                      text: intl.formatMessage({
                        id: 'diagnosticPrediction.performancePrediction.sohRecentlyMeasured',
                      }),
                      top: '51%', // 控制位置
                      left: '47%', // 控制位置
                      textAlign: 'center', // 让文字居中
                      textStyle: {
                        fontSize: 14,
                        //color: token.colorText,
                      },
                    },
                  ],
                  series: [
                    {
                      data: [{ value: 100, name: '', itemStyle: { color: '#F0F1F5' } }],
                      silent: true,
                      type: 'pie',
                      radius: ['70%', '100%'],
                      center: ['50%', '50%'],
                      avoidLabelOverlap: false,
                      label: {
                        show: false,
                        position: 'center',
                      },
                      emphasis: {
                        label: {
                          show: true,
                          fontSize: 40,
                          fontWeight: 'bold',
                        },
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                  ],
                }}
              />
            </Flex>
          )}
        </Card>
        <Card
          title={intl.formatMessage({
            id: 'diagnosticPrediction.performancePrediction.powerPrediction',
          })}
          style={{ flex: 1 }}
          loading={loading}
        >
          <div style={{ marginTop: -50 }}>
            <ReactEcharts
              style={{ height: 350 }}
              option={{
                legend: {
                  right: 22,
                  top: 10,
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow',
                  },
                  formatter: function (params) {
                    let text = `<div>`;
                    (params || []).forEach((item) => {
                      text += `${item.marker}${item.seriesName}&nbsp;:&nbsp;&nbsp;${item.value}${pageData.powerUnit}<br/>`;
                    });
                    text += '</div>';
                    return text;
                  },
                },
                grid: {
                  left: 20,
                  right: 30,
                  top: 90,
                  bottom: 10,
                  containLabel: true,
                },
                xAxis: [
                  {
                    type: 'category',
                    data: [],
                    axisTick: {
                      alignWithLabel: true,
                      show: true,
                      inside: true, //刻度内置
                    },
                    name: '',
                    axisLine: {
                      show: true,
                      lineStyle: {
                        color: '#ddd',
                      },
                    },
                  },
                ],
                yAxis: [
                  {
                    type: 'value',
                    name: `${intl.formatMessage({
                      id: 'diagnosticPrediction.performancePrediction.unit',
                    })}：${pageData.powerUnit || 'kW'}`,
                    nameTextStyle: {
                      //y轴上方单位的颜色
                      color: '#222',
                      align: 'left',
                    },
                    axisLabel: {
                      color: '#222',
                    },
                    axisLine: {
                      show: true,
                      lineStyle: {
                        color: '#ddd',
                      },
                    },
                    axisTick: {
                      show: true,
                      inside: true,
                    },
                    splitLine: {
                      show: pageData.power !== null,
                      lineStyle: {
                        type: 'dashed',
                      },
                    },
                  },
                ],
                series: [
                  {
                    name: intl.formatMessage({
                      id: 'diagnosticPrediction.performancePrediction.realtimePower',
                    }),
                    type: 'bar',
                    barWidth: 30,
                    barGap: 8,
                    color: '#FFA60C',
                    data: pageData.power !== null ? [pageData.power] : [],
                    itemStyle: {
                      normal: {
                        label: {
                          show: true, //开启显示
                          position: 'top', //在上方显示
                          textStyle: {
                            //数值样式
                            color: '#222',
                            fontSize: 14,
                          },
                          formatter: function (params) {
                            return params?.data + pageData.powerUnit;
                          },
                        },
                      },
                    },
                  },
                  {
                    name: intl.formatMessage({
                      id: 'diagnosticPrediction.performancePrediction.ratedPower',
                    }),
                    type: 'bar',
                    barWidth: 30,
                    barGap: 8,
                    color: '#FF7A0C',
                    data: pageData.power !== null ? [pageData.initialPower] : [],
                    itemStyle: {
                      normal: {
                        label: {
                          show: true, //开启显示
                          position: 'top', //在上方显示
                          textStyle: {
                            //数值样式
                            color: '#222',
                            fontSize: 14,
                          },
                          formatter: function (params) {
                            return params?.data + pageData.powerUnit;
                          },
                        },
                      },
                    },
                  },
                ],
                graphic: [
                  {
                    type: 'image',
                    silent: true,
                    style: {
                      image: require('@/assets/img/empty.png'),
                      width: 180,
                      height: 120,
                    },
                    bounding: 'raw',
                    top: 'center',
                    left: 'center',
                    invisible: pageData?.power !== null,
                  },
                  {
                    type: 'text', // 类型：文本
                    left: 'center',
                    top: 210,
                    silent: true, // 不响应事件
                    invisible: pageData?.power !== null, // 有数据就隐藏
                    style: {
                      fill: '#222',
                      text: intl.formatMessage({ id: 'global.noDataYet' }),
                      fontSize: '16px',
                    },
                  },
                ],
              }}
            />
            {pageData.power !== null && (
              <div style={{ paddingLeft: 100 }}>
                {intl.formatMessage(
                  { id: 'diagnosticPrediction.performancePrediction.realTimePowerTip' },
                  {
                    1: `${pageData.power}${pageData.powerUnit}`,
                    2: `${pageData.reducePower}${pageData.powerUnit}`,
                  },
                )}
              </div>
            )}
          </div>
        </Card>
      </Flex>
      <Card
        title={intl.formatMessage({
          id: 'diagnosticPrediction.performancePrediction.batteryBoxPerformancePrediction',
        })}
        style={{ marginTop: 20 }}
        loading={loading}
      >
        <>
          <ReactEcharts
            option={{
              color: colors,
              dataZoom: {
                type: 'inside',
              },
              legend: {
                left: 'right',
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow',
                },
              },
              grid: {
                left: isEnglish ? 160 : 110,
                right: 50,
                bottom: 10,
                containLabel: true,
              },
              xAxis: [
                {
                  type: 'category',
                  axisTick: {
                    alignWithLabel: true,
                    show: true,
                    inside: true, //刻度内置
                  },
                  // prettier-ignore
                  data: pageData?.boxList ?? [],
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: '#ddd',
                    },
                  },
                  axisLabel: {
                    color: '#222',
                  },
                },
              ],
              yAxis: [
                {
                  type: 'value',
                  // TODO 翻译
                  name: intl.formatMessage({
                    id: 'diagnosticPrediction.performancePrediction.operation',
                  }),
                  nameTextStyle: {
                    //y轴上方单位的颜色
                    color: colors[0],
                    align: 'right',
                  },
                  position: 'left',
                  alignTicks: true,
                  offset: 140,
                  max: ((pageData.maxWorking ?? 100) * 1.12).toFixed(0),
                  min: (pageData.minWroking ?? 0) >= 0 ? 0 : pageData.minWroking ?? 0,
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: colors[0],
                    },
                  },
                  axisLabel: {
                    formatter: (value) => {
                      return value?.toFixed(0);
                    },
                  },
                  axisTick: {
                    show: true,
                    inside: true,
                  },
                  splitLine: {
                    show: pageData?.boxList !== null,
                    lineStyle: {
                      type: 'dashed',
                    },
                  },
                },
                {
                  type: 'value',
                  name: 'SOH(%)',
                  nameTextStyle: {
                    //y轴上方单位的颜色
                    color: colors[1],
                    align: 'right',
                  },
                  position: 'left',
                  offset: 80,
                  min: 0,
                  max: 100,
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: colors[1],
                    },
                  },
                  axisLabel: {
                    formatter: (value) => {
                      return value?.toFixed(0);
                    },
                  },
                  axisTick: {
                    show: true,
                    inside: true,
                  },
                  splitLine: {
                    show: pageData?.boxList !== null,
                    lineStyle: {
                      type: 'dashed',
                    },
                  },
                },
                {
                  type: 'value',
                  // TODO 翻译
                  name: `${intl.formatMessage({
                    id: 'diagnosticPrediction.performancePrediction.power',
                  })}(${pageData.powerUnit ?? 'kW'})`,
                  nameTextStyle: {
                    //y轴上方单位的颜色
                    color: colors[2],
                    align: 'right',
                  },
                  position: 'left',
                  alignTicks: true,
                  offset: 10,
                  //max: pageData.initialPower ,
                  min: (pageData.minPower ?? 0) >= 0 ? 0 : pageData.minPower ?? 0,
                  max: ((pageData.maxPower ?? 100) * 1.06).toFixed(0),
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: colors[2],
                    },
                  },
                  axisLabel: {
                    formatter: (value) => {
                      return value?.toFixed(0);
                    },
                  },
                  axisTick: {
                    show: true,
                    inside: true,
                  },
                  splitLine: {
                    show: pageData?.boxList !== null,
                    lineStyle: {
                      type: 'dashed',
                    },
                  },
                },
              ],
              series: [
                {
                  name: intl.formatMessage({
                    id: 'diagnosticPrediction.performancePrediction.operation',
                  }),
                  type: 'bar',
                  data: pageData.workingList,
                  barWidth: '28%',
                  barMaxWidth: 30,
                  yAxisIndex: 0,
                  markLine: {
                    data: [{ yAxis: pageData?.peak?.initialWorking || 0 }],
                  },
                },
                {
                  name: 'SOH(%)',
                  type: 'bar',
                  data: pageData.sohList,
                  barWidth: '28%',
                  barMaxWidth: 30,
                  yAxisIndex: 1,
                  markLine: {
                    data: [{ yAxis: pageData.initialSoh || 0 }],
                  },
                },
                {
                  name: `${intl.formatMessage({
                    id: 'diagnosticPrediction.performancePrediction.power',
                  })}(${pageData.powerUnit || 'kW'})`,
                  type: 'bar',
                  data: pageData.powerList,
                  barWidth: '28%',
                  barMaxWidth: 30,
                  yAxisIndex: 2,
                  markLine: {
                    data: [{ yAxis: pageData?.peak?.initialPower || 0 }],
                  },
                },
              ],
              graphic: [
                {
                  type: 'image',
                  silent: true,
                  style: {
                    image: require('@/assets/img/empty.png'),
                    width: 180,
                    height: 120,
                  },
                  bounding: 'raw',
                  top: 'center',
                  left: 'center',
                  invisible: pageData?.boxList?.length,
                },
                {
                  type: 'text', // 类型：文本
                  left: 'center',
                  top: 220,
                  silent: true, // 不响应事件
                  invisible: pageData?.boxList?.length, // 有数据就隐藏
                  style: {
                    fill: '#222',
                    text: intl.formatMessage({ id: 'global.noDataYet' }),
                    fontSize: '16px',
                  },
                },
              ],
            }}
          />
          <Flex gap={40} className={Styles.estimationDesc}>
            {pageData.peak?.maxWorkingBoxName && (
              <dl>
                <dt>
                  {intl.formatMessage({
                    id: 'diagnosticPrediction.performancePrediction.performancePrediction',
                  })}{' '}
                  :
                </dt>
                <dd>
                  {intl.formatMessage(
                    {
                      id: 'diagnosticPrediction.performancePrediction.compareOperatingCondition',
                    },
                    {
                      1: pageData.peak?.initialWorking,
                      2: pageData.peak?.maxWorkingBoxName,
                      3: pageData.peak?.maxWorking,
                      4: pageData.peak?.maxReduceWorking,
                      5: pageData.peak?.minWorkingBoxName,
                      6: pageData.peak?.minWorking,
                      7: pageData.peak?.minReduceWorking,
                    },
                  )}
                </dd>
              </dl>
            )}
            {pageData.peak?.maxSohBoxName && (
              <dl>
                <dt>
                  {intl.formatMessage({
                    id: 'diagnosticPrediction.performancePrediction.sohPrediction',
                  })}{' '}
                  :
                </dt>
                <dd>
                  {intl.formatMessage(
                    { id: 'diagnosticPrediction.performancePrediction.compareInitialSoh' },
                    {
                      1: pageData.peak?.initialSoh,
                      2: pageData.peak?.maxSohBoxName,
                      3: pageData.peak?.maxSoh,
                      4: pageData.peak?.maxReduceSoh,
                      5: pageData.peak?.minSohBoxName,
                      6: pageData.peak?.minSoh,
                      7: pageData.peak?.minReduceSoh,
                    },
                  )}
                </dd>
              </dl>
            )}
            {pageData.peak?.maxPowerBoxName && (
              <dl>
                <dt>
                  {intl.formatMessage({
                    id: 'diagnosticPrediction.performancePrediction.powerPrediction',
                  })}{' '}
                  :
                </dt>
                <dd>
                  {intl.formatMessage(
                    { id: 'diagnosticPrediction.performancePrediction.compareRatedPower' },
                    {
                      1: pageData.peak?.initialPower,
                      2: pageData.peak?.maxPowerBoxName,
                      3: `${pageData.peak?.maxPower}${pageData.powerUnit}`,
                      4: `${pageData.peak?.maxReducePower}${pageData.powerUnit}`,
                      5: pageData.peak?.minPowerBoxName,
                      6: `${pageData.peak?.minPower}${pageData.powerUnit}`,
                      7: `${pageData.peak?.minReducePower}${pageData.powerUnit}`,
                    },
                  )}
                </dd>
              </dl>
            )}
          </Flex>
        </>
      </Card>
    </div>
  );
};
export default Index;
